<template>
  <div>
    <ant-modal
      modalWidth="1000"
      modalHeight="800"
      :visible="open"
      :modal-title="formTitle"
      :adjust-size="true"
      @cancel="cancel"
    >
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        slot="content"
        layout="vertical"
      >
        <a-row
          :gutter="32"
          style="width: 85%; margin-left: 10%; margin-top: -10px"
        >
          <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
            <div style="display: flex; flex-direction: row">
              <span
                style="
                  width: 5px;
                  height: 22px;
                  background-color: coral;
                  display: block;
                "
              ></span>
              <span
                style="
                  margin-left: 5px;
                  height: 22px;
                  line-height: 22px;
                  font-size: 16px;
                  font-weight: 600;
                "
                >基本信息</span
              >
            </div>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="名称" prop="ruleName">
              <a-input v-model="form.ruleName" placeholder="请输入名称" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="城市名称" prop="ruleCities">
              <a-select
                placeholder="请选择城市名称"
                v-model="form.ruleCities"
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                style="width: 100%"
                allow-clear
                mode="multiple"
              >
                <a-select-option
                  v-for="(d, index) in cityOptions"
                  :key="index"
                  :value="d.name.replace('市', '')"
                  >{{ d.name }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row
          :gutter="32"
          style="width: 85%; margin-left: 10%; margin-top: -10px"
          v-if="false"
        >
          <a-col :span="8">
            <a-form-model-item label="分配类型" prop="ruleType">
              <a-select
                placeholder="请选择分配类型"
                v-model="form.ruleType"
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                style="width: 100%"
                allow-clear
                disabled
              >
                <a-select-option
                  v-for="(d, index) in ruleTypeOptions"
                  :key="index"
                  :value="d.dictValue"
                  >{{ d.dictLabel }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="分配方式" prop="ruleLogic">
              <a-select
                placeholder="请选择分配方式"
                v-model="form.ruleLogic"
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                style="width: 100%"
                allow-clear
              >
                <a-select-option
                  v-for="(d, index) in ruleLogicOptions"
                  :key="index"
                  :value="d.dictValue"
                  >{{ d.dictLabel }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row
          :gutter="32"
          style="width: 85%; margin-left: 10%; margin-top: -10px"
        >
          <a-col :span="12">
            <a-form-model-item label="客户来源" prop="laiyuan">
              <a-select
                placeholder="请选择客户来源"
                v-model="form.laiyuan"
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                style="width: 100%"
                mode="multiple"
                allow-clear
              >
                <a-select-option
                  v-for="(dict, index) in laiyuanOptions"
                  :key="index"
                  :value="dict.dictValue"
                  >{{ dict.dictLabel }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="状态" prop="status">
              <a-radio-group v-model="form.status" button-style="solid">
                <a-radio-button
                  v-for="(dict, index) in statusOptions"
                  :key="index"
                  :value="dict.dictValue"
                >
                  {{ dict.dictLabel }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row
          :gutter="32"
          style="width: 85%; margin-left: 10%; margin-top: -10px"
        >
          <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
            <div style="display: flex; flex-direction: row">
              <span
                style="
                  width: 5px;
                  height: 22px;
                  background-color: coral;
                  display: block;
                "
              ></span>
              <span
                style="
                  margin-left: 5px;
                  height: 22px;
                  line-height: 22px;
                  font-size: 16px;
                  font-weight: 600;
                "
                >人员分配</span
              >
            </div>
          </a-col>
          <a-col :span="6">
            <!-- 部门树 -->
            <dept-tree
              ref="deptTree"
              :isShowSearch="false"
              :deptOptions="deptOptions"
              :defalutExpandedKeys="expandedKeys"
              @setDataOptionInfo="setDataOptionInfo"
              @select="clickDeptNode"
              :isKefu="2"
          /></a-col>
          <a-col :span="18">
            <a-table
              rowKey="userId"
              size="middle"
              :columns="columns"
              :data-source="form.ruleUsers"
              :scroll="{ x: 'calc(200px + 50%)' }"
              bordered
              :pagination="false"
            >
              <div class="table-operations" slot="button">
                <!-- <a-input-search
                  placeholder="请输入编码或名称"
                  v-model="querySubParam.userNameOrName"
                  style="width: 150px"
                  @search="handleQueryRoleUser"
                /> -->
              </div>

              <span slot="isEnable" slot-scope="text, record">
                <a-switch
                  v-model="record.isEnable"
                  checked-children="是"
                  un-checked-children="否"
                />
              </span>
              <span slot="maxCount" slot-scope="text, record">
                <a-input-number
                  v-model="record.maxCount"
                  :min="0"
                  :max="100"
                  placeholder="1-100"
                  :precision="0"
                  allow-clear
                  style="width: 80%"
                />
              </span>
              <span slot="weight" slot-scope="text, record">
                <a-input-number
                  v-model="record.weight"
                  :min="0"
                  :max="100"
                  placeholder="0-100"
                  :precision="0"
                  allow-clear
                  style="width: 70%"
                />
              </span>
            </a-table>
          </a-col>
        </a-row>
      </a-form-model>
      <template slot="footer">
        <a-button @click="cancel"> 取消 </a-button>
        <a-button type="primary" @click="submitForm"> 保存 </a-button>
      </template>
    </ant-modal>
  </div>
</template>
<script>
import BizPushRuleEditForm from "./BizPushRuleForm";
export default {
  ...BizPushRuleEditForm,
};
</script>
